/* 桌宠模式专用样式 */

/* 桌宠模式下的全局样式 */
.electron-mode {
  /* 圆角边框 */
  border-radius: 16px;
  overflow: hidden;
}

/* 桌宠模式下的滚动条美化 */
.electron-mode ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.electron-mode ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.electron-mode ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  transition: background 0.2s;
}

.electron-mode ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* 桌宠动画效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

.electron-mode .voice-circle {
  animation: float 3s ease-in-out infinite;
}

/* 窗口阴影效果 */
.electron-mode {
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

/* 桌宠特殊效果 - 悬浮感 */
.pet-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pet-hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

/* 桌宠毛玻璃效果 */
.pet-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* 桌宠紧凑布局 */
.electron-mode .voice-control-interface {
  padding: 10px;
}

/* 隐藏不必要的元素 */
.electron-mode .footer {
  display: none;
}

/* 桌宠主题色 */
:root {
  --pet-primary-color: #667eea;
  --pet-secondary-color: #764ba2;
  --pet-accent-color: #f093fb;
  --pet-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 桌宠按钮样式 */
.electron-mode .el-button {
  border-radius: 12px;
  transition: all 0.2s ease;
}

.electron-mode .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 桌宠卡片样式 */
.electron-mode .el-card {
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
}

/* 适配小窗口 */
@media (max-width: 500px) {
  .electron-mode .voice-circle {
    width: 150px !important;
    height: 150px !important;
  }
  
  .electron-mode .header-bar {
    font-size: 14px;
  }
}

